@charset "UTF-8";
//轮播图
.banner{
    margin-top: 80px;
    .bxslider{
        min-width: 1200px;
        li{
            min-width: 1200px;
            img{
                margin: 0 auto;
            }
        }
        .wlh_banner_pre {
            -webkit-animation: wlh_banner_pre .5s ease-out forwards;
            animation: wlh_banner_pre .5s ease-out forwards
        }
        
        .wlh_banner_next {
            -webkit-animation: wlh_banner_next .5s ease-out forwards;
            animation: wlh_banner_next .5s ease-out forwards;
        }
    }
}
//数字动画展示
.num-contain{
    height: 480px; width: 100%; position: relative; background: #fff; min-width: 1200px;
    .num-c{
        ul{
            width: 1200px; position: absolute; top: -88px; left: 50%; margin-left: -600px;
        }
        li{
            list-style: none; float: left; width: 370px; margin-right: 30px; margin-bottom: 70px; position: relative; cursor: pointer;
            img{
                width: 100%; position: relative; bottom: 0px; z-index: 10;
            }
            .num-c-msg{
                height: 80px;  color: #fff; text-align: left;  width: 100%; position: absolute; top: 0px;
                .num-c-msg-tit{
                    position: relative; height: 100%; width: 100%; padding-top: 15px;
                    >span{
                        display: block;padding-left: 10px; 
                        &.large-tit{
                            font: 700 25px 'Lato',sans-serif;
                        }
                        &.small-tit{
                            font: 300 14px 'Lato',sans-serif;
                        }
                    }
                }
            }
        }
        a:last-child{
            li{
                margin-right: 0px;
            }
        }
        a:hover{
            .btnAni{
                z-index:1;background:transparent;
            }
            .btnAni:before{
                transition:.3s;background:gray;z-index:-1;
            }
            .btnAni:after,.btnAni:before{
                width:100%;
            }
        }
    }
    .num-num{
        width: 1200px; margin: 0 auto; padding-top: 230px;
        li{
            list-style: none; float: left; width: 280px; margin-right: 20px; height: 170px;
            &:last-child{
                margin-right: 0px;
            }
            span{
                display: inline-block;
                &.bg{
                    width: 80px; height: 50px;  padding-bottom: 30px; border-bottom: 3px solid #333;font-size: 50px;
                }
                &.line{
                    width: 158px; margin-left: 2px; height: 50px; line-height: 50px; padding-bottom: 30px; vertical-align: top; color: #333; 
                    .num{
                        font: 700 32px 'Lato',sans-serif;
                    }
                    .units{
                        font: 700 18px 'Lato',sans-serif; padding-left: 10px; 
                    }
                }
            }
            .n-n-msg{
                font-size: 16px; color: #545454; margin-top: 30px; text-align: center; width: 250px; font-weight: 700;
            }
        }
    }
}
//切换快捷游戏
.play-contain{
    height: 570px; background: #f7f7f7;  padding: 140px 0px; position: relative; min-width: 1200px;
    .p-c{
        width: 1200px; margin: 0 auto; position: relative;
        .img_bg{ 
            position: absolute; z-index: 0;  height: 570px; width: 1200px;
        }
        h2{
            position: absolute; 
            span{
                font: 700 25px 'Lato',sans-serif; color: #333;
                &.p-c-t-line{
                    display: block;
                    .f-line{
                        width: 50px; margin-right: -5px; display: inline-block; border-bottom: 4px solid #333;
                    }
                    .e-line{
                        width: 50px; display: inline-block; 
                    }
                }
            }
        }
        .p-c-c{
            .p-c-c-left{
                width: 800px; float: left; text-align: center; 
                .p-c-l-img{
                    display: none;
                    &.active{
                        display: block;opacity: 0;-webkit-animation-duration: .8s; animation-duration: .8s;-webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-play-state: paused; animation-play-state: paused;-webkit-animation-name: wlhScaleIn; animation-name: wlhScaleIn; -webkit-animation-play-state: running; animation-play-state: running;
                    }
                }
                img{
                    height: 600px; position: absolute; left: 120px;
                    &.anim1{ -webkit-animation:wlhTop 1.8s linear infinite alternate;animation:wlhTop 1.8s linear infinite alternate;}
                    &.anim2{ -webkit-animation:wlhTop 0.9s linear infinite alternate;animation:wlhTop 0.9s linear infinite alternate;}
                }
            }
            .p-c-c-right{
                width: 400px;  margin-top: 30px; position: absolute; right: 0px;
                .tab-c{
                     ul{
                         height: 500px; min-height: 500px;  background: url("../images/play_type_bg.png") no-repeat center;
                     }
                    li{
                        width: 140px; height: 80px;  text-align: center; cursor: pointer;  line-height: 80px; font-weight: bold;
                        p.active-hide{
                            font-weight: 700;
                        }
                        img{
                            margin-top: 10px;
                        }
                        &.active{
                            // background: gray;
                            .active-hide{
                                display: none;
                            }
                            &.one{
                                .active-show{
                                    margin-left: -80px;
                                }
                            }
                            &.two{
                                .active-show{
                                    margin-left: -75px;
                                }
                            }
                            &.three{
                                .active-show{
                                    margin-left: -80px;
                                }
                            }
                            &.four{
                                .active-show{
                                    margin-left: -80px;
                                }
                            }
                            &.five{
                                .active-show{
                                    margin-left: -80px;
                                }
                            }
                            &.six{
                                .active-show{
                                    margin-left: -80px;
                                }
                            }
                            .active-show{
                                display: block; background: url("../images/play_type_tab_bg.png") no-repeat center; width: 200px;
                                opacity: 0;-webkit-animation-duration: .8s; animation-duration: .8s;-webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-play-state: paused; animation-play-state: paused;-webkit-animation-name: wlhScaleIn; animation-name: wlhScaleIn; -webkit-animation-play-state: running; animation-play-state: running;
                            }
                        }
                        &.one{
                            margin-left: 155px; padding-top: 10px;
                        }
                        &.two{
                            margin-left: 140px;
                        }
                        &.three{
                            margin-left: 130px;
                        }
                        &.four{
                            margin-left: 115px;
                        }
                        &.five{
                            margin-left: 103px;
                        }
                        &.six{
                            margin-left: 90px;
                        }
                        .active-show{
                            display: none; position: relative; 
                            .a-s-num{
                                position: absolute; color: #fff; right: 10px; font-size: 30px; font-weight: bold;
                            }
                            .a-s-name{
                                color: #ac2529; font-size: 22px; font-weight: bold; margin-left: -30px;
                            }
                        }
                    }
                }
            }
        }
    }
}
//体育竞技
.play-ele-game{
    height: 600px; position: relative; min-width: 1200px; overflow: hidden;
    .p-e-g-left{
        width: 33%; float: left; height: 100%; background: #333;
        h2{
            font-size: 25px;
            position: relative;
            margin: 7.5%;
            span{
                font: 700 25px 'Lato',sans-serif; color: #fff; 
                &.p-c-t-line{
                    display: block;
                    .f-line{
                        width: 50px; margin-right: -4px; display: inline-block; border-bottom: 4px solid #fff;
                    }
                    .e-line{
                        width: 50px; display: inline-block; 
                    }
                }
            }
        }
        .p-e-g-msg1{
            margin: 5% 7.5% 10%; color: #fff; font: 300 16px 'Lato',sans-serif;
        }
        .p-e-g-msg2{
            margin: 3% 7.5% 10%; color: #fff;font: 300 16px 'Lato',sans-serif;
        }
        a:hover.btn{ color: #000;}
        a.btn{
            color: #fff;position: relative;text-align: center; cursor: pointer; border: none; width: 100px; padding: 12px 0px;
            font-weight: 700; display: inline-block; text-decoration: none; 
        }
    }
    .p-e-g-right{
        width: 66%; float: left; height: 100%;
        li{
            list-style: none; width: 50%; float: left; text-align: center; cursor: pointer; position: relative; overflow: hidden;
            img{
                width: 100%; vertical-align: middle;
            }
            .p-r-msg{
                position: absolute; width: 100%;  height: 100%;  left: 0px; top: 0px; background: rgba(0,0,0,0.6); color: #fff; text-decoration: none; display: none; 
                h3{
                    font-size: 18px; margin-top: 30%;
                }
            }
        }
        a:hover{
            .p-r-msg{
                display: block;
                &::after{
                    width: 0px;
                    height: 0px;
                    content: '';
                    position: absolute;
                    border-right: 17px solid transparent;
                    left: 0px;
                    bottom: 0px;
                }
            }
        }
    }
}
//棋牌游戏的列表
.play-chess-game{
    width: 100%; min-width: 1200px; background: #f7f7f7; height: 580px;
    .p-c-g-c{
        width: 1200px; margin: 0 auto;
        .p-c-g-c-head{
            padding-top: 100px;
            h2{
                font-size: 25px; position: relative; margin-bottom: 40px;
                span{
                     font-weight: 700; color: #333; font-size: 25px;
                    &.p-c-t-line{
                        display: block;
                        .f-line{
                            width: 50px; margin-right: -5px; display: inline-block; border-bottom: 4px solid #333;
                        }
                        .e-line{
                            width: 50px; display: inline-block; 
                        }
                    }
                }

            }
            .btn{
                text-decoration: none;  border: none; display: inline-block; padding: 15px 25px;  background: #f4f4f4; color: #333; position: absolute; right: 0px; top: 5px;font: 700 14px 'Lato',sans-serif;
            }
        }
        .p-c-g-c-list{
            a:last-child{
                li{
                    margin-right: 0px;
                }
            }
            li{
                float: left; list-style: none; margin-right: 30px; width: 276px; position: relative; cursor: pointer;
                img{
                    width: 100%;
                }
                .one-msg{
                    width: 100%;height: 55px;margin-top: -5px;background: #f4f4f4; text-align: center; padding-top: 35px;  text-decoration: none; color: #333;
                }
                .one-msg-other{
                    position: absolute;  height: 130px; bottom: 0px; width: 100%; background: #333; text-align: center; color: #fff; display: none;
                    h3{
                        margin: 35px 0px 15px 0px;
                    }
                }
                &:after{
                    width: 0px;height: 0px;content: '';position: absolute;border-right: 17px solid transparent;left: 0px;bottom: 0px;
                }
            }
            a:hover{
                .one-msg-other{
                    display: block;
                }
            }
        }
    }
}
//app的下载的部分
.app_down{
    width: 100%; min-width: 1200px; background: #fff; height: 560px; padding-top: 20px; 
    .a-d-c{
        width: 1200px; margin: 0 auto;
        .a-d-c-left{
            width: 600px; float: left; margin-top: 100px;
            .a-d-ios{
                width: 300px; float: left; position: relative;
                .a-d-ios-img{
                    display: inline-block; width: 50px; height: 50px; 
                }
            }
            .a-d-android{
                width: 300px;float: right; position: relative;
                .a-d-android-img{
                    display: inline-block; width: 50px; height: 50px; 
                }
            }
            .a-d-msg{
                font-size: 14px; margin: 10px 0px; color: #333;
            }
            img.ewm{
                width: 110px; height: 110px; display: block;
            }
            .a-d-btn{
                margin-top: 40px;
                span{
                    display: inline-block; width: 110px; height: 40px;  line-height: 40px; text-align: center; color: #fff; cursor: pointer; position: relative;border: 1px solid #ddd;
                    &:hover{ color: #000; }
                }
            }
        }
        .a-d-c-right{
            width: 600px; float: left;
            .bx-wrapper{
                margin-bottom: 0px;
                .bx-viewport{
                    background: transparent;
                }
            }
            .bxslider_app{
                li{
                    filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;
                }
                .bp-div{
                    width: 200px; height: 100%; position: relative;
                }
                .current{
                    filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;
                    transition:opacity .1s linear ; 
                    img{
                        transform: scale(1.15); transition:transform .1s linear ;  position: relative; z-index: 200;
                    }
                }
            }
        }
        .a-d-app-version{
            position: absolute; width: 150px; top: 120px;left: 120px; font-size: 14px;
        }
    }
}
//合作商的图片链接
.platform-contain{
    background: #e1e1e1;height: 50px; padding: 10px; min-width: 1180px; text-align: center;
    .platform-c{
        width: 1200px; margin: 0 auto;
        a{
            position: relative; display: inline-block; text-decoration: none;
            &:hover{
                span{
                    &.one{
                        background-position: 0px -40px;
                    }
                    &.two{
                        background-position: 0px -120px;
                    }
                    &.three{
                        background-position: 0px 42px;
                    }
                    &.four{
                        background-position: 0px -200px;
                    }
                    &.five{
                        background-position: 0px 120px;
                    } 
                }
            }
        }
        .p-c-li{
            overflow: hidden; float: left; margin-top: 6px; cursor: pointer; height: 40px; width: 200px;
            span{
                width: 140px; height: 40px; background: url('../images/p-c-bg.png'); display: block; margin: 0 auto; 
                &.one{
                    background-position: 0px 0px;
                }
                &.two{
                    background-position: 0px -80px;
                }
                &.three{
                    background-position: 0px 82px;
                }
                &.four{
                    background-position: 0px -160px;
                }
                &.five{
                    background-position: 0px 160px;
                } 
            }
           
        }
    }
}
//弹出层
.win{
    position: fixed; background: rgba(0,0,0,0.6);  left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1000;
    .win-contain{
        &.win-ios-c{
            width: 370px; height: 630px; background: #fff; position: absolute; left: 50%; margin-left: -185px; top: 50%; margin-top: -315px;
            .w-i-contain{
                height: 490px; overflow-y: auto; position: relative;  width: 300px; margin-left: 30px;
                .bxslider_lc_app{
                    position: relative;
                    li{
                       width: 300px !important; height: 415px; padding-top: 10px;
                       img{
                           width: 300px;
                       }
                    }
                }
            }
        }
        &.win-msg-c{
            width: 440px; height: 420px;background: #fff; position: absolute; left: 50%; margin-left: -220px; top: 50%; margin-top: -210px;
            .w-i-contain{
                height: 260px; overflow-y: auto;
                div{
                    padding: 10px 20px; font-size: 14px;
                }
            }
        }
        &.win-msg-android{
            width: 570px; height: 520px;background: #fff; position: absolute; left: 50%; margin-left: -285px; top: 50%; margin-top: -260px;
            .w-i-contain{
                font-size: 14px; text-align: center;
                h3{
                   margin: 20px 30px 10px; text-align: left;
                }
                p{
                    color: #aaa; margin: 0px 30px 10px 30px; text-align: left;
                }
            }
        }
        .w-i-header{
            height: 50px;  position: relative;
            .w-i-msg{
                font-size: 20px; color: #fff; font-weight: bold; display: inline-block; line-height: 50px; padding-left: 20px;
            }
            .w-i-close{
                display: inline-block; width: 30px;height: 30px;position: absolute;right: 20px; top: 10px; cursor: pointer;
                img{
                    width: 30px; height: 30px;
                }
            }
        }
        
        .w-i-footer{
            height: 90px;
            .w-i-f-msg{
                text-align: center; font-size: 14px; margin-bottom: 10px; text-decoration: underline; cursor: pointer; color: #25aae1;
            } 
            .w-i-f-btn{
                border-radius: 5px; height: 50px; width: 310px;  margin: 0 auto; color: #fff; text-align: center; line-height: 50px; cursor: pointer;
            }
        }
    }
}
.hidewin{
    display: none;
}

.btnAni:after,.btnAni:before{
    content:'';position:absolute;left:0;top:0;width:0;height:100%;z-index:-2;border-radius:0px;
}
.btnAni:hover{
    z-index:1;background:transparent;
}
.btnAni:before{
    transition:.3s;background:#eeeeee;z-index:-1;
}
.btnAni:hover:after,.btnAni:hover:before{
    width:100%;
}
//动画
//从0到1的比例缩放
@-webkit-keyframes wlhScaleIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes wlhScaleIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}
@-webkit-keyframes wlhTop{0%{top:0}to{top:-40px}}
@keyframes wlhTop{0%{top:0}to{top:-40px}}
//首页滚屏的动画
@-webkit-keyframes wlh_banner_pre {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.2);
        opacity: 0
    }
}
@keyframes wlh_banner_pre {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.2);
        opacity: 0
    }
}
@-webkit-keyframes wlh_banner_next {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}
@keyframes wlh_banner_next {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}






